Responzivni web dizajn

Ovo je web stranica koja se prilagođava svakom uređaju pomoću Flexboxa i Media Queries.

01 / Uvod

Kako je sve počelo?

U ranim danima interneta web stranice radile su se u fiksnoj širini za desktop računala. Kada su se pojavili pametni telefoni, počele su se raditi posebne, odvojene mobilne verzije iste stranice.

Izbacuje se korištenje više verzija web stranica. Počinje se koristiti jedna web stranica koja se prilagođava uređaju koji ju učitava.

www.index.hr
Stara verzija samo za računala
↓
→
m.index.hr
Posebna stranica za mobitele
↓
→
index.hr
Današnja prilagodljiva stranica
02 / Tip rasporeda

Fixed vs. Fluid layout

Fixed layout (Fiksni raspored)

Elementi na web stranici imaju fiksne širine (npr. px) i fiksni raspored elemenata.

  • Takve web stranice nemaju mogućnost prilagodbe uređajima.
  • Nisu pogodne za uređaje s manjim ekranima (javlja se scroll).

Fluid layout (Fluidni raspored)

Elementi na web stranici imaju fluidne širine (npr. %) i uvijek su u istom odnosu jedan prema drugom.

  • Jedan element može zauzimati trećinu ukupne širine web stranice.
  • Zauzimaju udio u ekranu bez obzira na veličinu ekrana.
03 / Pristup dizajnu

Adaptive vs. Responsive

Adaptive web stranice (prilagodljive)

Ne moraju biti temeljene na fluidnom rasporedu, ali se mogu prilagođavati različitim uređajima pomoću CSS media queries.

Responsive web design (responzivne)

Pristup gdje se kombinacijom fluidnog rasporeda i CSS media queries postiže najveća kontrola izgleda i ponašanja web stranice na različitim uređajima.

04 / Posebna tehnika

Media Queries

Što je media queries?

Media queries je CSS tehnika koja omogućuje da se određeni CSS stilovi primjenjuju samo ako je zadovoljen određeni uvjet. Koristi se u CSS3 i koristi @media pravilo za uključivanje bloka CSS svojstava.

/* Primjer: */ @media only screen and (min-width: 600px) { /* Stilovi za uređaje šire od 600 piksela */ body { background-color: lightblue; } }

Media types

  • all: primjenjuje na sve uređaje
  • screen: primjenjuje se za uređaje s ekranom (računala, tableti, mobiteli)
  • handheld: prenosivi uređaji s malim ekranom
  • print: primjenjuje se na dokumente za ispis

Nizanje više uvjeta

Više uvjeta odvajamo zarezom što predstavlja logičku operaciju ILI.

Korištenje riječi AND predstavlja logičku operaciju I (oba uvjeta moraju biti zadovoljena).

05 / HTML i CSS

Viewport i mjere

Definicija pojmova (Meta Viewport)

Viewport je vidljivo područje web stranice na uređaju za prikaz. Ovo područje se razlikuje ovisno o uređaju i bit će manje na mobilnom telefonu nego na računalnom zaslonu.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Initial-scale=1.0 je HTML oznaka koja se koristi za kontrolu veličine i oblika prikaza web stranice. Ova oznaka kontrolira početni faktor uvećanja ili smanjenja prikaza web stranice.

Fiksne mjere u CSS-u

  • px (pikseli)
  • mm (milimetri)
  • cm (centimetri)
  • in (inči)

Varijabilne mjere u CSS-u

  • % (postotci)
  • em / rem
  • vw (viewport-width)
  • vh (viewport-height)

Najčešće točke prekida (breakpoints)

Extra small (XS) 320px

Najmanja širina (mobilni uređaji)

Small (SM) 480px

Širina manjih mobilnih uređaja

Medium (MD) 600px

Veći mobilni uređaji i manji tableti

Large (LG) 768px

Veći tableti i manji prijenosnici

Extra large (XL) 900px

Veći prijenosnici i manja računala

Extra extra large (XXL) 1200px

Veliki zasloni i klasična računala